<template>
	<view class="register">
		<view class="register-form">
			<uni-forms ref="form" :model="formData" :rules="rules">
				<uni-forms-item name="username">
					<uni-easyinput v-model="formData.username" focus  placeholder="请输入用户名" :styles="inputStyles" />
				</uni-forms-item>
				<uni-forms-item name="email">
					<uni-easyinput v-model="formData.email" focus  placeholder="请输入邮箱" :styles="inputStyles" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput v-model="formData.password" focus type="password" placeholder="请输入密码" :styles="inputStyles" />
				</uni-forms-item>
				<uni-forms-item name="comfrimPassword">
					<uni-easyinput v-model="formData.comfrimPassword" focus type="password" placeholder="请确认输入密码" :styles="inputStyles" />
				</uni-forms-item>
			</uni-forms>
			<button class="btn-submit" @click="handleRegister">注册</button>
		</view>
		<view class="account">
			<text>已有账号？</text>
			<text class="to-login" @click="handleToLogin">去登录</text>
		</view>
	</view>
</template>

<script>
	import registerApi from '../../api/avatar/avatar.js'
	export default{
		data(){
			return{
				formData:{
					username:'',
					email:'',
					password:'',
					comfrimPassword:''
				},
				inputStyles:{
					borderColor	:'#8be627'
				},
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '用户名不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					},
					comfrimPassword: {
						rules: [{
							required: true,
							errorMessage: '确认密码不能为空'
						}]
					}
					}
				}
		},
		methods:{
			handleToLogin(){
				uni.navigateTo({
					url:'/pages/avatar/login'
				})
			},
			handleRegister(){
				this.$refs.form.validate().then(res => {
					registerApi.register({usersInfo:this.formData}).then(res=>{
						if(res.code==200){
							this.handleToLogin()
						}
					})
					
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register{
		width: 100vw;
		height: 100vh;
		background-image: url('https://img0.baidu.com/it/u=4251799645,3797204950&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=641');
		background-size: cover;
		background-color: $uni-bg-color;
		.register-form{
			text-align: center;
			padding: 400rpx 50rpx 0 50rpx;
			.btn-submit{
				background-color: $uni-primary;
				border-radius: 100rpx;
				color: $uni-white;
			}
		}
		.account{
			position: fixed;
			top:90%;
			left: 32%;
			.to-login{
				color: #ff5500;
			}
		}	
	}
</style>